<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all">

		<style>
			.timer {
				text-align: center;
				color: #1E9FFF;
				font-size: 24px;
				font-family:"楷体";
			}
		</style>
	</head>

	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>FNST-在线笔试系统</legend>
		</fieldset>
		<div style="padding: 20px; background-color: #F2F2F2;">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card" >
						<div class="layui-card-header">笔试查看</div>
						<div class="timer" >
							FNST在线笔试，当前答题者：<span id="username"></span>
						</div>
						<br />
						<hr class="layui-bg-orange">
						<div class="layui-card-body">
							<div id="EXAM">

							</div>
							<div class="site-demo-button" style="margin-top: 40px; text-align: right;">
								<button class="layui-btn site-demo-layedit" style="" id="close">关闭</button>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../layui/layui.js"></script>
		<script src="../js/common.js"></script>
		<script src="../../js/sockjs.min.js"></script>
		<script src="../../js/stomp.min.js"></script>
		<script>
			function GetQueryString(name) {     
				var  reg = new  RegExp("(^|&)" + name + "=([^&]*)(&|$)");    
				var  r = window.location.search.substr(1).match(reg);     
				if(r != null) return unescape(r[2]);
				return  null;
			}
			var userid = GetQueryString("userid");
			var stompClient;
			var serverUrl = host()+"/websocket";
			var room; //频道号
			var websocket = null;
			//websocket连接
			function conectWebSocket(room, serverUrl) {
				var socket = new SockJS(serverUrl);
				this.stompClient = Stomp.over(socket);
				var that = this;
				this.stompClient.connect({}, function(frame) {
					that.stompClient.subscribe('/topic/' + room, function(txt) {
						console.log(txt);
						var content = JSON.parse(txt.body)['content'];
						var questionId = JSON.parse(txt.body)['questionId'];
						document.getElementById(questionId).innerHTML = content;
						console.log(content);
					});
				});
			}

			function disconnect() {
				//断开连接的方法
				if(this.stompClient !== undefined) {
					this.stompClient.disconnect();
					layer.alert("Disconnected");
				} else {
					layer.alert("当前没有连接websocket")
				}
				this.stompClient = undefined;
			}
			layui.use('layedit', function() {
				var list = [];
				var $ = layui.jquery;
				var layedit = layui.layedit;
				$("#username").text(localStorage.getItem("bsusername"));

				$.ajax({
					type: 'get',
					url: host() + "/getSelfQuestionsById",
					data: {
						userId: userid,
						token: localStorage.token
					},
					dataType: 'json',
					async: false,
					success: function(msg) {
						var exam = $("#EXAM");
						for(var i = 0; i < msg.data.length; i++) {
							console.log(msg.data[i].id);
							var j = i + 1;
							var h = '<div class="layui-form-item "><div class="layui-form-item "><span>第' + j + '题：</span><span class="question"id="quesion' + j + '">' + msg.data[i].subject + '</span></div></div><hr class="layui-bg-grey"><div class="layui-form-item"><span>答题：</span><div class="layui-textarea" id="' + msg.data[i].id + '" style="height: 300px;overflow:scroll;" ></div><hr class="layui-bg-red"></div>';
							exam.append(h);
						}
					}
				});
				$("#close").on('click', function() {
					window.close();
				})
			});
			window.onload = function() {
				conectWebSocket(userid, serverUrl);

			}
		</script>
	</body>

</html>